import { ref } from "vue";

export function useVehicleColumns() {
  const vehicleList = ref([]);
  const vehicleColumns: TableColumnList = [
    {
      label: "车辆",
      prop: "vehicleId",
      slot: "vehicle",
      minWidth: 110
    },
    {
      label: "开始时间",
      prop: "entryStartTime",
      cellRenderer: ({ row }) => (
        <el-date-picker
          v-model={row.entryStartTime}
          type="datetime"
          class="!w-[200px]"
          placeholder="请选择开始时间"
          format="YYYY-MM-DD HH:mm"
          value-format="YYYY-MM-DD HH:mm"
        />
      ),
      minWidth: 90
    },
    {
      label: "结束时间",
      prop: "entryEndTime",
      cellRenderer: ({ row }) => (
        <el-date-picker
          v-model={row.entryEndTime}
          type="datetime"
          class="!w-[200px]"
          format="YYYY-MM-DD HH:mm"
          placeholder="请选择结束时间"
          value-format="YYYY-MM-DD HH:mm"
        />
      ),
      minWidth: 90
    },
    {
      label: "操作",
      fixed: "right",
      width: 90,
      slot: "operation"
    }
  ];
  const selectValue = ref([]);
  function vehicleOnAdd() {
    selectValue.value.push({
      vehicleSelectValue: ""
    });
    vehicleList.value.push({
      did: vehicleList.value.length + 1,
      vehicleId: "",
      entryStartTime: "",
      entryEndTime: ""
    });
  }

  function vehicleOnDel(row) {
    const index = vehicleList.value.indexOf(row);
    if (index !== -1) {
      vehicleList.value.splice(index, 1);
      selectValue.value.splice(index, 1);
    }
  }

  return {
    vehicleColumns,
    vehicleList,
    vehicleOnAdd,
    vehicleOnDel,
    selectValue
  };
}
